<template>
  <div class="mine-nav">
    <div class="fl detail">AboutMe</div>
    <div class="fr">
      <div class="nav-test">
        <div @click="one(1)" :class="{ active:isActive==1 }" >关于小王 <span></span></div>
        <div @click="two(2)" :class="{ active:isActive==2  }" >求职意向 <span></span></div>
        <div @click="three(3)" :class="{ active:isActive==3  }">作品集 <span></span></div>
        <div @click="four(4)" :class="{ active:isActive==4  }">技术掌握 <span></span></div>
        <div @click="five(5)" :class="{ active:isActive==5  }">联系小王 <span></span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: 1,
    };
  },
  name: "Mine-nav",
  components: {},
  methods: {
    one(num) {
      this.$parent.one();
      this.isActive=num
     this.$router.push('/mine')
    },
    two(num) {
      this.$parent.two();
      this.isActive=num
    },
    three(num) {
      this.$parent.three();
      this.isActive=num
    },
    four(num) {
      this.$parent.four();
      this.isActive=num
    },
    five(num) {
      this.$parent.five();
      this.isActive=num
    },
    // addClass(index){
    //   this.isActive=index
    // }
  },
};
</script>

<style>
.detail{
  margin-left: 200px;
  font-weight: 500;
  font-size: 25px;
  color: #ffffff;
}
.active {
 color:orange !important;
  /* background-color: #000; */
}
.mine-nav {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: rgba(84, 92, 100, 0.7);
  position: fixed;
  top: 60px;
  z-index: 999;
    min-width:1200px;
}
.nav-test {
  display: flex;
  width: 550px;
  /* justify-content: space-between; */
  margin-right: 200px;
  align-items: center;

}
.nav-test div {
  width: 50px;
  flex: 1;
  color: #ffffff;
  text-align: center;
  position: relative;
}
.nav-test div span{
  display: block;
	width: 100%;height: 3px;
	background: orange;
	position: absolute;bottom:-3px;
  
	transform: rotateY(90deg);
	transition: transform 0.5s;
}
.nav-test div:hover span{
  transform: rotateY(0deg);
}
.nav-test div:hover {
  cursor: pointer;
  color: #e87e04;
  background-color:#545c64;
  /* background-color: #fff; */
}
</style>